<template>
  <span v-if="theme.showToolBox">
    <vab-icon icon="tools-fill" @click="openDialog" />
    <el-dialog
      append-to-body
      title="工具箱"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <div v-for="(item, index) in actions" :key="index">
        <div v-if="index > 0" class="h24"></div>
        <el-divider content-position="left">
          <b class="color-primary">{{ item.name }}</b>
        </el-divider>
        <div class="d-flex">
          <div
            v-for="(citem, cindex) in item.children"
            :key="cindex"
            class="d-flex flex-column align-items-center mr24 ml24"
            style="cursor: pointer"
            @click="showUrl(item.id, citem)"
          >
            <div class="intelirri-icon" :class="citem.class">
              <span
                class="font20 iconfont color-white"
                :class="citem.icon"
              ></span>
            </div>
            <div class="h12"></div>
            <span style="font-size: 12px">{{ citem.name }}</span>
          </div>
        </div>
      </div>
      <re-compute ref="reCompute" />
      <plant ref="plant" />
    </el-dialog>
  </span>
</template>

<script>
  import { mapGetters } from 'vuex'
  // import { getList } from '@/api/search'
  import ReCompute from './components/ReCompute'
  import Plant from './components/Plant'
  export default {
    name: 'VabToolBox',
    components: { ReCompute, Plant },
    data() {
      return {
        dialogVisible: false,
        queryForm: {
          searchWord: '',
        },
        restaurants: [],
        state: '',
        timeout: null,
        actions: [
          {
            id: 1,
            name: '设置项',
            children: [
              {
                name: '种植设置',
                id: 99,
                icon: 'icon-zhiwu',
                class: 'bg-success',
              },
            ],
          },
          {
            id: 2,
            name: '重新计算项',
            children: [
              {
                name: '气象数据',
                id: 1,
                icon: 'icon-qixiangjiance',
                class: 'bg-primary',
              },
              {
                name: '墒情数据',
                id: 2,
                icon: 'icon-turangshidu',
                class: 'bg-success',
              },
              {
                name: '作物数据',
                id: 3,
                icon: 'icon-nongye',
                class: 'bg-warning',
              },
              {
                name: '决策数据',
                id: 4,
                icon: 'icon-fuwutongji',
                class: 'bg-danger',
              },
            ],
          },
        ],
      }
    },
    computed: {
      ...mapGetters({
        theme: 'settings/theme',
      }),
    },
    methods: {
      openDialog() {
        this.dialogVisible = true
      },
      showUrl(id, row) {
        if (id === 1) {
          this.$refs.plant.show()
        } else {
          this.$refs.reCompute.show(row)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .intelirri-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    color: #fff;
    text-align: center;
    background: red;
    border-radius: 50%;
  }
</style>
